<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" ></meta>
    <title>详细内容</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap-datetimepicker.min.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/base/base.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/common.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/picker.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/select2.min.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/beautify-time.css" type="text/css">
    <!--[if IE 8]>
    <link rel="stylesheet" href="${newframe}/css/base/IE8.css" type="text/css"/>
    <![endif]-->
    <style>
        .select2-container{
            width:100% !important;
        }
    </style>
    <%@ include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
    <script src="${assets}/bootstrapValidator/js/bootstrapValidator.js"></script>
    <%--<script src="${frames}/laydate/laydate.dev.js"></script>--%>
    <script src="${frames}/js/laydate/laydate.js"></script>
    <script src="${assets}/bootstrapValidator/js/language/zh_CN.js"></script>
    <script src="${newframe}/js/select2.full.zh.js"></script>
    <script>
        $(document).ready(function() {
            $('#myForm').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    instrumentId: {
                        validators: {
                            notEmpty: true
                        }
                    },
                    rentMan: {
                        validators: {
                            notEmpty: true
                        }
                    },
                    rentTel: {
                        validators: {
                            notEmpty: true
                        }
                    },
                    rentTime: {
                        validators: {
                            notEmpty: true
                        }
                    },
                    rentMoney: {
                        validators: {
                            notEmpty: true,
                            numeric: true
                        }
                    },
                    rentInterval: {
                        validators: {
                            stringLength:{
                                min: 0,
                                max: 10
                            }
                        }
                    },
                    expectBackTime: {
                        validators: {
                            notEmpty: true
                        }
                    },
                    idCard: {
                        validators: {
                            notEmpty: true
                        }
                    }
                    <shiro:hasPermission name="super:role">
                    ,
                    hospId: {
                        validators: {
                            notEmpty: true
                        }
                    }
                    </shiro:hasPermission>

                }
            }).on('success.form.bv', function (e) {
                e.preventDefault();
                $.ajax({
                    url:'${URL_RENT_ADDRENT}',
                    type:'post',
                    data:$('#myForm').serialize(),
                    async : false, //默认为true 异步
                    error:function(){
                        alert('error');
                    },
                    success:function(data){
                        var d = eval( '(' + data + ')');
                        if(!d.success){
                            alert(d.msg);
                        }
                        closeFrame();
                    }
                });
            });
            initLayDate("#rentTime");
            initLayDate("#expectBackTime");
            initInstr("#instrumentId");
            <shiro:hasPermission name="super:role">
            initHosptipal("#hospId");
            </shiro:hasPermission>
            initDoctor("#doctorId");
        });

        //关闭并刷新
        function closeFrame(){
            window.parent.closeModal();
        }
        function initDateTime(id){
            var t = $(id).datetimepicker({
                language:  'zh-CN',
                weekStart:  0,
                todayBtn: true,
                autoclose:  1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            }).on('hide',function(e) {
                $('#myForm').bootstrapValidator('revalidateField', id);
            });
        }
        function initInstr(id){
            $(id).select2({
                placeholder: '请选择设备',
                ajax: {
                    url: '${URL_BASE_SELECTINSTRUMENT}',
                    dataType: 'json',
                    type: "post",
                    delay: 250,
                    data: function (params) {
                        var data=new Object();
                        data["limit"]=10;
                        if(params.page==undefined){
                            data["offset"]=0;
                        }else {
                            data["offset"]= (params.page-1)*10;
                        }
                        if(params.term!=undefined){
                            data["name"]= params.term;
                        }
                        return data;
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;
                        return {
                            results: data.data,
                            pagination: {
                                more: (params.page * 10) < data.msg
                            }
                        };
                    },
                    cache: true
                },
                escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
                minimumInputLength: 0,
                templateResult: formatRepo, // omitted for brevity, see the source of this page
                templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
            });
        }
        function formatRepo (repo) {
            if (repo.loading) return repo.text;
            var markup ="<div class='select2-result-repository clearfix'>" +
                "<div class='select2-result-repository__title'>" + repo.text+'|'+repo.instrumentSN + "</div></div>";
            return markup;
        }

        function formatRepoSelection (repo) {
            $("#instrumentId").val(repo.id);
            return repo.text;
        }
        function initLayDate(id){
            laydate.render({
                elem: id //指定元素
                //控件选择完毕后的回调,点击日期、清空、现在、确定均会触发。
                , done: function (value, date, endDate) {
                    $('#myForm').bootstrapValidator('revalidateField', $(id));
                }
            });
        }


        //医院下拉
        function formatRepoHosp(repo) {
            if (repo.loading) {
                return repo.text;
            }
            var markup = "<div class='select2-result-repository clearfix'>" +
                "<div class='select2-result-repository__title'>" + repo.text +"</div></div>";
            return markup;
        }
        function formatRepoSelectionHosp(repo) {
            $("#hospId").val(repo.id);
            return repo.text;
        }
        function initHosptipal(id){
            $(id).select2({
                placeholder: '请选择医院',
                ajax: {
                    url: '${URL_BASE_SELECTHOSPITAL}',
                    dataType: 'json',
                    type: "post",
                    delay: 250,
                    data: function (params) {
                        var data=new Object();
                        data["limit"]=10;
                        if(params.page==undefined){
                            data["offset"]=0;
                        }else {
                            data["offset"]= (params.page-1)*10;
                        }
                        if(params.term!=undefined){
                            data["name"]= params.term;
                        }
                        return data;
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;
                        return {
                            results: data.data,
                            pagination: {
                                more: (params.page * 10) < data.msg
                            }
                        };
                    },
                    cache: true
                },
                escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
                minimumInputLength: 0,
                templateResult: formatRepoHosp, // omitted for brevity, see the source of this page
                templateSelection: formatRepoSelectionHosp // omitted for brevity, see the source of this page
            });
        }

        //医生下拉
        function formatRepoDoctor(repo) {
            if (repo.loading) {
                return repo.text;
            }
            var markup = "<div class='select2-result-repository clearfix'>" +
                "<div class='select2-result-repository__title'>" + repo.text +"</div></div>";
            return markup;
        }
        function formatRepoSelectionDoctor(repo) {
            $("#doctorId").val(repo.id);
            return repo.text;
        }
        function initDoctor(id){
            $(id).select2({
                placeholder: '请选择医生',
                ajax: {
                    url: '${URL_BASE_SELECTDOCTOR}',
                    dataType: 'json',
                    type: "post",
                    delay: 250,
                    data: function (params) {
                        var data=new Object();
                        data["iDisplayLength"]=10;
                        if(params.page==undefined){
                            data["iDisplayStart"]=0;
                        }else {
                            data["iDisplayStart"]= (params.page-1)*10;
                        }
                        if(params.term!=undefined){
                            data["drName"]= params.term;
                        }

                        return data;
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;
                        return {
                            results: data.data,
                            pagination: {
                                more: (params.page * 10) < data.msg
                            }
                        };
                    },
                    cache: true
                },
                escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
                minimumInputLength: 0,
                templateResult: formatRepoDoctor, // omitted for brevity, see the source of this page
                templateSelection: formatRepoSelectionDoctor // omitted for brevity, see the source of this page
            });
        }

    </script>
</head>
<body style="width: 98%">
<form id="myForm" class="form-horizontal" method="post" >
    <div class="clearfix">
        <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">设备</label>
            <div class="col-sm-8">
                <%-- <input type="text" id="instrumentId" name="instrumentId" class="form-control"  value="${entity.instrumentId}">
                 --%>
                <select name="instrumentId" id="instrumentId"  class="form-control">
                    <!--<option value="-1"></option>
                   <option value="0">---请选择---</option> -->
                </select>
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">租借人</label>
            <div class="col-sm-8">
                <input type="text" id="rentMan" name="rentMan" class="form-control" >
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">租借人电话</label>
            <div class="col-sm-8">
                <input type="text" id="rentTel" name="rentTel" class="form-control" >
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">签约团队</label>
            <div class="col-sm-8">
                <input type="text" id="signTeam" name="signTeam" class="form-control" >
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">租借日期</label>
            <div class="col-sm-8">
                <div id="TimeArea" class="input-group date form_date" style="width: 100%">
                    <input type="text" id="rentTime" name="rentTime" class="form-control" placeholder="选择日期" readonly>
                </div>
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">已付押金</label>
            <div class="col-sm-8">
                <input type="text" id="rentMoney" name="rentMoney" class="form-control" >
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">预归还日期</label>
            <div class="col-sm-8">
                <div class="input-group date form_date" style="width: 100%">
                    <input type="text" id="expectBackTime" name="expectBackTime" class="form-control" placeholder="选择日期" readonly>
                </div>
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">租借备注</label>
            <div class="col-sm-8">
                <input type="text" id="rentComment" name="rentComment" class="form-control" >
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">租借人身份证号</label>
            <div class="col-sm-8">
                <input type="text" id="idCard" name="idCard" class="form-control" style="padding-right: 30px;">
            </div>
        </div>

        <%--所属医院--%>
        <shiro:hasPermission name="super:role">
            <div class="form-group col-sm-6">
                <label class="col-sm-4 control-label">所属医院</label>
                <div class="col-sm-8">
                    <select name="hospId" id="hospId"  class="form-control"></select>
                </div>
            </div>
        </shiro:hasPermission>
        <shiro:lacksPermission name="super:role">
            <input type="hidden" id="hospId" name="hospId" class="form-control" value="${hospital.id}">
        </shiro:lacksPermission>

        <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">签约医生</label>
            <div class="col-sm-8">
                <select name="doctorId" id="doctorId"  class="form-control"></select>
            </div>
        </div>

    </div>
    <div class="modal-footer" style="text-align: center ">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeModalButt" onclick="closeFrame()">关闭</button>
        <button type="submit" class="btn btn-primary">保存</button>
    </div>
</form>
</body>
</html>